<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证账号</title>
</head>
<body>
<form action="/WebTest/load">
    <p>账号：<input type="text" name="userName"><span></span></p>
    <p>密码：<input type="password" name="password"></p>
    <p>确认密码：<input type="password" name="repassword"></p>
    <p>
        <button type="submit">注册</button>
    </p>
</form>


<script>
    let user = document.querySelector("input[name='userName']");
    user.addEventListener('blur', function () {
        checkAccount();
    })


    function checkAccount() {
        let xhr = new XMLHttpRequest();
        xhr.open("get", "http://localhost:8080/WebTest/checkuser?userName=" + user.value)
        xhr.send();
        xhr.addEventListener("readystatechange", function () {
            let span = document.querySelector("span");
            span.innerText = xhr.responseText
            span.style.color = "red";
        })
    }
</script>
</body>
</html>